<template>
	<div class="back2">
		<h1>
			忘记密码
		</h1>
		<el-form :model="forgetdata" :rules="rules" ref="forgetdata" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="用户名" prop="username">
		    <el-input v-model="forgetdata.username"></el-input>
		  </el-form-item>
		 <el-form-item label="密码" prop="password">
		     <el-input type="password" v-model="forgetdata.password" autocomplete="off"></el-input>
		   </el-form-item>
		   <el-form-item label="确认密码" prop="checkpass">
		     <el-input type="password" v-model="forgetdata.checkpass" autocomplete="off"></el-input>
		   </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="resetpass">重置密码</el-button>
		    <el-button @click="resetForm('forgetdata')">重置</el-button>
		  </el-form-item>
		  
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'forgetpassword',
		data() {
			var validatePass = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请输入密码'));
			        } else {
			          if (this.ruleForm.checkPass !== '') {
			            this.$refs.ruleForm.validateField('checkPass');
			          }
			          callback();
			        }
			      };
			      var validatePass2 = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请再次输入密码'));
			        } else if (value !== this.signdata.password) {
			          callback(new Error('两次输入密码不一致!'));
			        } else {
			          callback();
			        }
			      };
			return{
				forgetdata: {
					username: '',
					password: '',
					checkpass: '',
				},
				rules: {
					username: [
						{required: true, message: '请输入用户名', trigger: 'blur'},
						{min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur'}
					],
				   password: [
					   {min: 6, max: 25, message:'长度在6到25个字符', trigger: 'blur'},
				        { validator: validatePass, trigger: 'blur' }
				    ],
					checkpass: [
				        { validator: validatePass2, trigger: 'blur' }
				    ],
				}
			}
		},
		methods: {
			resetpass() {
				this.$axios.post("http://localhost:8848/user/resetpass", this.$qs.stringify({
					username: this.forgetdata.username,
					password: this.forgetdata.password
				}))
					.then( (resp) => {
						var u = resp.data;
						
						if (u == 1) {
							this.$message.success("修改成功");
							this.$router.push('/');
						}
						else if (u == 0) {
							this.$message.error("修改失败");
						}
					})
					.catch( (err) => {
						console.log("error=", err);
					})
			}
		}
	}
</script>

<style>
	/* .back {
		position: absolute;
		top: 10%;
		left: 20%;
		background-color: #E9EEF3;
		width: 800px;
		border-radius: 25px;
		text-align: center;
		padding: 5px 40px;
		box-sizing: border-box;
	} */
	.back2 {
		width: 600px;
		margin-top: 25px;
		margin-left: 450px;		
	}
</style>
